<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-title" content="年度总结">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="transparent"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="x5-fullscreen" content="true">
	<meta name=”x5-page-mode” content=”app”>
	<meta name="full-screen" content="yes">
	<meta name="browsermode" content="application">
	<meta name="HandheldFriendly" content=”true”>
	<script language="JavaScript"> if (document.all) {
    window.resizeTo(screen.availWidth, screen.availHeight);
  } </script>
	<title>年度总结</title>
	<link rel="stylesheet" href="./css/reset.css">
	<link href="./css/index5.css" rel="stylesheet"/>
</head>

<body>

<div class="page_box">
	<audio src="./2.mp3" controls="controls" loop="true" hidden="true" id="start" type="audio/mpeg"
				 autoplay="autoplay"></audio>
	<!-- 第一页 -->
	<div class="page page1">
		<div class="page-top"></div>
		<div class="page-content page-content1">
			<p class="page1-content-text page-content-text">时光总在不经意间流逝</p>
			<p class="page1-content-text page-content-text">2025，一起走过的路</p>
			<p class="page1-content-text page-content-text">你也许忘了，但我们记得……</p>
		</div>
		<div class="page-right page1-right"></div>
		<div class="page1-bottom-text">上滑开启你的年终总结</div>
		<div id="preload-01" class="cotent cotent1"></div>
	</div>

	<!-- 第二页 -->
	<div class="page page2 hide">
		<div class="page-top"></div>
		<div class="page-right page2-right"></div>
		<div class="page-content">
			<p class="page2-content-text page-content-text"><span class="font-number">2017</span>年<span class="font-number">10</span>月<span
				class="font-number">31</span>日</p>
			<p class="page2-content-text page-content-text">是你在XX梦想起航的日子</p>
			<p class="page2-content-text page-content-text">这是我们一起走过的第<span class="font-number">453</span>天</p>
			<p class="page2-content-text page-content-text">陪伴，是最长情的告白！</p>
		</div>
		<div id="preload-02" class="cotent cotent2"></div>
	</div>

	<!-- 第三页 -->
	<div class="page page3 hide">
		<div class="page-top"></div>
		<div class="page-right page3-right"></div>
		<div class="page-content">
			<p class="page3-content-text page-content-text"><span class="font-number">10</span>月<span
				class="font-number">19</span>日,</p>
			<p class="page3-content-text page-content-text">大概是你最拼搏的一天</p>
			<p class="page3-content-text page-content-text">这一天,</p>
			<p class="page3-content-text page-content-text">你在公司度过了<span class="font-number">14</span>时<span
				class="font-number">52</span>分</p>
			<p class="page3-content-text page-content-text">你的点滴付出，我们记在心里！</p>
		</div>
		<div id="preload-03" class="cotent"></div>
	</div>

	<!-- 第四页 -->
	<div class="page page4 hide">
		<div class="page-top"></div>
		<div class="page-right page2-right page4-right"></div>
		<div class="page-content">
			<p class="page4-content-text page-content-text page-content-text-bottom">三尺讲台，四季耕耘。</p>
			<p class="page4-content-text page-content-text page-content-text-height">这一年，XX进行了<span
				class="font-number">26</span>场培训，培训学员<span class="font-number">820</span>人。</p>
			<p class="page4-content-text page-content-text page-content-text-height page-content-text-bottom">讲师人数<span
				class="font-number">56</span>人，开发课程<span class="font-number">161</span> 门。</p>
			<p class="page4-content-text page-content-text page-content-text-height">
				教室不只有谆谆教诲，还有一双双璀璨的双眸。你曾是此间少年，一回首，却已育人几年。</p>
		</div>
		<div id="preload-09" class="cotent"></div>
	</div>

	<!-- 第五页 -->
	<div class="page page5 hide">
		<div class="page-top"></div>
		<div class="page-right page2-right page4-right"></div>
		<div class="page-content">
			<p class="page4-content-text page-content-text page-content-text-bottom">百尺竿头，更进一步。</p>
			<p class="page4-content-text page-content-text">接下来的时间我们一起加油</p>
			<p class="page4-content-text page-content-text">共同创建美好的未来</p>
			<p class="page4-content-text page-content-text">期待我们成功的那天！！！</p>
		</div>
		<div id="preload-07" class="cotent"></div>
	</div>

	<!-- 第六页 -->
	<div class="page page6 hide">
		<div class="page-top"></div>
		<div class="page-right page2-right"></div>
		<!-- 面板 -->
		<div class="bj_panel_end bj_panel_end3">
			<img class="bj_end_bar" src="./images/bj_end_bar.png" alt="">
			<!-- <div  class="bj_end_bar"></div> -->
			<p class="title">选哪儿XX智能预测</p>
			<p class="keyword">你的年度关键词</p>

			<!-- ！注意  bj_panel_end1对应匹配keyword-text1-->
			<!-- <p class="keyword-text keyword-text1">智多星</p> -->
			<!-- <p class="keyword-text keyword-text2">幸运星</p> -->
			<p class="keyword-text keyword-text3">北极星</p>
			<!-- ！注意 智多星描述 -->
			<!-- <p class="desc">足智多谋、敢想敢为的智多星，说的就是你了。2019，敢不敢接受火眼金睛的xx的挑战？比比谁更聪明！</p> -->
			<!-- ！注意 幸运星描述 -->
			<!-- <p class="desc">人人都羡慕你的好运气，但越努力，才能越幸运。2019，什么也别说了，跟着xx（猫头鹰的名字）走就对了！</p> -->
			<!-- ！注意 北极星描述 -->
			<p class="desc">
				北极星象征着坚定、执着和永远的守护。你散发出的星光，可以成为指引他人前进的导航。2019，xx（猫头鹰的名字）预测你将更加人气爆表，收获满满！</p>
		</div>
		<!-- 按钮 -->
		<img class="bj_end_button bj_end_button1" src="./images/bj_end_button2.png" alt="">
		<img class="bj_end_button bj_end_button2" src="./images/bj_end_button1.png" alt="">
		<div id="preload-06" class="cotent"></div>
	</div>
</div>

<div class="arrow">
	<img src="./images/arrow.png" alt="">
</div>

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript">
  document.addEventListener("touchmove", function (e) {
    e.preventDefault();
  }, {passive: false});

  function yaoyao() {
    wx.config({
      // 配置信息, 即使不正确也能使用 wx.ready
      debug: false,
      appId: '',
      timestamp: 1,
      nonceStr: '',
      signature: '',
      jsApiList: []
    });
    wx.ready(function () {
      document.getElementById('start').play();
    });
  }

  window.onload = function () {
    yaoyao();
    document.getElementById('start').play();
    document.addEventListener("WeixinJSBridgeReady", function () {
      document.getElementById('start').play();
    }, false);
  }


  var curPage = 1;
  var PageL = $('.page_box .page').length;
  var canTouch = false;
  canTouch = true;

  var startY, endY, diff;
  document.body.addEventListener("touchstart", touchStart, {passive: false});
  document.body.addEventListener("touchmove", touchMove, {passive: false});
  document.body.addEventListener("touchend", touchEnd, {passive: false});

  function touchStart(e) {
    var touch = e.touches[0];
    startY = touch.pageY;
    document.getElementById('start').play();
  }

  function touchMove(e) {
    //e.preventDefault();
    var touch = e.touches[0];
    endY = touch.pageY;
    diff = endY - startY;

  }

  function touchEnd(e) {
    if (Math.abs(diff) > 10 && canTouch) {
      if (diff > 0) {
        if (curPage <= 1) {
          return;
        }

        $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
        curPage--;
        $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
        handleArrowShow();
      } else {
        if (curPage >= PageL) {
          return;
        }

        $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
        curPage++;
        $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
        handleArrowShow();
      }
      canTouch = false;
      setTimeout(function () {
        canTouch = true;
        diff = 0;
        $('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
      }, 1000);
    }
  }

  //处理向上箭头显示隐藏
  function handleArrowShow() {
    if (curPage >= PageL) {
      $('.arrow').hide();
    } else {
      $('.arrow').show();
    }
  }

  //图片预加载
  function preloader() {
    if (document.getElementById) {
      document.getElementById("preload-01").style.background = "url(./images/page5/bj_01.webp) no-repeat";
      document.getElementById("preload-02").style.background = "url(./images/page5/bj_02.webp) no-repeat";
      document.getElementById("preload-03").style.background = "url(./images/page5/bj_03.webp) no-repeat";
      document.getElementById("preload-07").style.background = "url(./images/page5/bj_07.webp) no-repeat";
      if (document.getElementById("preload-09")) {
        document.getElementById("preload-09").style.background = "url(./images/page5/bj_09.webp) no-repeat";
      }
      document.getElementById("preload-06").style.background = "url(./images/page5/bj_end.webp) no-repeat";
    }
  }

  function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;

    } else {
      window.onload = function () {

        if (oldonload) {
          oldonload();
        }
        func();

      }
    }
  }

  addLoadEvent(preloader);

  function isIphoneX() {
    return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
  }

  console.log(isIphoneX())
  //再看一遍
  $('.bj_end_button1').click(function () {
    window.location.reload();
  })

</script>
</body>
</html>
